<script setup lang="ts">
const layout = useLayout();
const settingStore = useSettingStore();

settingStore.setLang("zhCN");

const { theme, locale, dateLocale } = toRefs(settingStore);

const { modal, dialog, message, loadingBar, notification } = createDiscreteApi(
  ["message", "dialog", "notification", "loadingBar", "modal"],
  {
    configProviderProps: computed(() => ({
      abstract: true,
      theme: settingStore.theme,
      locale: settingStore.locale,
      dateLocale: settingStore.dateLocale,
    })),
  }
);

window.$modal = modal;
window.$dialog = dialog;
window.$message = message;
window.$loadingBar = loadingBar;
window.$notification = notification;
</script>

<template>
  <n-config-provider
    :theme="theme"
    :locale="locale"
    :abstract="true"
    :date-locale="dateLocale"
    :inlineThemeDisabled="true"
  >
    <n-loading-bar-provider>
      <n-message-provider>
        <n-notification-provider>
          <n-dialog-provider>
            <n-modal-provider>
              <n-global-style />
              <component :is="layout" />
            </n-modal-provider>
          </n-dialog-provider>
        </n-notification-provider>
      </n-message-provider>
    </n-loading-bar-provider>
  </n-config-provider>
</template>

<style lang="scss">
#app {
  @apply w-full h-full;
}
</style>
